<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:jsf="http://xmlns.jcp.org/jsf"
      xmlns:f="http://xmlns.jcp.org/jsf/core"
      xmlns:h="http://xmlns.jcp.org/jsf/html"
      xmlns:p="http://primefaces.org/ui"
      xmlns:ui="http://xmlns.jcp.org/jsf/facelets">

    <head jsf:id="header"> 
        <title>Cronograma</title>
        <link rel="stylesheet" type="text/css" 
              href="#{request.contextPath}/resources/bootstrap/css/bootstrap.min.css" />

        <h:outputScript library="js" name="locale.min.js" />
        <style>
            body {
                padding-top: 70px;
                background-image: url("#{scheduleBean.image}");
                background-repeat: no-repeat;
                -webkit-background-size: cover; /* For WebKit*/
                -moz-background-size: cover;    /* Mozilla*/
                -o-background-size: cover;      /* Opera*/
                background-size: cover;         /* Generic*/
            }
            .navbar {
                height: 30px;
            }
            .panel{
                opacity:0.9;
            }
        </style>
    </head>
    <body jsf:id="bodyx">
        <div class="navbar navbar-default navbar-fixed-top" role="navigation">
            <div class="container">
                <div class="navbar-header">
                    <button class="navbar-toggle collapsed" data-target=".navbar-collapse" data-toggle="collapse" type="button" >
                        <span class="sr-only">Menú</span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                    </button>
                    <a class="navbar-brand" href="index.jsf" target="_blank">Vista Común</a>
                </div>
                <h:form>
                <div class="navbar-collapse collapse">
                    <ul class="nav navbar-nav">
                        <li class="active" style="padding-right: 3px;">
                            <a href="loged.jsf">Cronograma</a>
                        </li>
                        <li class="active" style="padding-right: 3px;">
                            <a href="image.jsf" >Programación Imagenes</a>
                        </li>
                        <li class="active" >
                            <a href="plantilla.jsf" >Plantillas</a>
                        </li>
                    </ul>
                    <ul class="nav navbar-nav navbar-right" style="background: #E7E7E7;">
                        <li>
                            <p:commandLink ajax="false" action="#{scheduleBean.logOut()}">Salir</p:commandLink>
                        </li>
                    </ul>
                </div>
                    </h:form>
            </div>
        </div>
        <div class="container">
            <p:messages autoUpdate="true" closable="true" showDetail="true"/>
            <p style="font-size: 20px;"><strong>LISTA DE IMÁGENES POR MES</strong></p>
            <p:panel style="width: 100%" styleClass="panel" >
                <h:form>
                    <div align="center">
                        <p><strong>Resolución sugerida: 1250 x 800 JPG</strong></p>
                        <p:accordionPanel dynamic="true" cache="false" activeIndex="-1" 
                                          value="#{scheduleBean.listMonth}" var="imag">  
                            <p:tab title="#{imag}" >
                                
                                <p:graphicImage value="resources/images/#{imag}" 
                                                alt="Recuerde que puede cambiar la imagen de #{imag}" 
                                                    width="400" height="300" cache="false"
                                                    title="#{imag}"/> 
                            </p:tab>
                        </p:accordionPanel>

                    </div>
                </h:form>
            </p:panel>

            <p:panel style="width: 100%" styleClass="panel">
                <!-- Form enctype should be multipart/form-data -->
                <h:form id="inputForm" enctype="multipart/form-data">
                    <strong>Seleccione un mes</strong>
                    <h:selectOneMenu value="#{scheduleBean.mothSelected}">
                        <f:selectItems value="#{scheduleBean.listMonth}" var="month"
                                       itemLabel="#{month}" itemValue="#{month}" />
                    </h:selectOneMenu>
                    <br/>
                    <!-- inputFile tag to upload file -->
                    <strong>Subir Archivo JPG : </strong>
                    <h:inputFile id="file" 
                                 label="file"
                                 value="#{scheduleBean.file}" 
                                 required="true" 
                                 requiredMessage="File not selected !!">

                    </h:inputFile>
                    <br />
                    <br/>
                    <h:commandButton id="submit" 
                                     action="#{scheduleBean.uploadFile}"
                                     value="Subir Archivo" /><br />

                </h:form>
            </p:panel>
        </div>

        <script src="resources/bootstrap/js/bootstrap.min.js" />

    </body>

</html>
